<template>
  上传文件格式以form-data格式上传
  <el-upload
  class="upload-demo"
  drag
  action="/api/single1"
  :show-file-list="false"
  :on-success="handleSuccess"
  :before-upload="beforeUpload"
  enctype="multipart/form-data" 
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
  <img :src="img" alt="">
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
/* 
6、文件断点续传
  文件上传有两套方案
    1、基于文件流(form-data)   // element-ui上传组件默认是基于文件流端
    2、客户端需要把文件化为base64

  默认上传
    格式：multipart/form-data
    数据格式：form-data
    file 文件流信息
    filename 文件名
  
  上传成功后获取服务器返回信息，通知on-success回调函数执行
*/

export default defineComponent({
  name: 'Upload1',
  setup() {
    const count = ref(0)
    return { count }
  },
  data() {
    return {
      img: null
    }
  },
  methods: {
    handleSuccess(result) {
      if(result.code == 0) {
        this.img = result.path
      }
    },
    beforeUpload(file) {
      // 格式校验
      let { type, size } = file
      // if(!/(png|gif|jpeg|jpg)/i.test(type)) {
      //   this.$message("文件格式不正确～～")
      //   return false
      // }
      if(size>200 * 1024 * 1024) {
        this.$message("文件过大，请上传小于200MB的文件～～") 
        return false
      }

      return true
    }
  }
})
</script>
